:root {
  --colorR1: #000000;
  --colorR2: #212921;
  --colorR3: #D1D1D5;
  --colorR4: #535653;
  --colorR5: #3154AE;
  --colorR6: rgba(0, 0, 0, 0.8);
}


/* error field information field */
.field__addTaskInfo,
.field__emptyForm {
  display: none;
  position: fixed;
  left: 50%;
  top: 30%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 340px;
  padding: 10px;
  background-color: var(--colorR2);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  color: var(--colorR3);
  border: 2px solid var(--colorR3);
  border-radius: 10px;
  -webkit-box-shadow: 0 0 8px 8px var(--colorR6);
          box-shadow: 0 0 8px 8px var(--colorR6);
  z-index: 2;
}

.field__error {
  display: block;
}

.field__addTaskInfo.active,
.field__emptyForm.active {
  display: block;
}

.field__addTaskInfo-info,
.field__emptyForm-info {
  padding: 10px;
}

.field__addTaskInfo-btn,
.field__emptyForm-btn {
  display: block;
  margin: 20px auto;
  width: 150px;
  height: 50px;
  border-radius: 5px;
  background-color: var(--colorR5);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  color: var(--colorR3);
  cursor: pointer;
}